<template>
	<div>
		<el-form :label-width="language=='en'?'150px':'100px'" :model="data.info" :rules="data.rules" ref="ruleFormRef">

			<el-form-item :label="$t('account.account.userName') + ':'" prop="nickname" class="pr-8">
				<el-input v-model="data.info.nickname" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('account.account.profile') + ':'" prop="pic" class="pr-8">
				<el-input v-model="data.info.pic" type="text" readonly>
					<template #append>
						<Upload :list="{ 'data': 'adv', 'list': false }" :type="1" :uptype="2" @exposeData="expose" />
					</template>
					<template #suffix>
						<el-icon class="ml-2" size="20" @click="urlimg(data.info.pic)">
							<Picture />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>

			<el-form-item :label="$t('account.account.login') + ':'" prop="account" class="pr-8">
				<el-input v-model="data.info.account" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('account.account.loginPass') + ':'" prop="password" class="pr-8">
				<el-input v-model="data.info.password" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('account.account.realName') + ':'" prop="real_name" class="pr-8">
				<el-input v-model="data.info.real_name" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('account.account.gender') + ':'" prop="sex" class="pr-8">
				<el-select v-model="data.info.sex" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('account.account.secrecy')" :value="1" />
					<el-option :label="$t('account.account.man')" :value="2" />
					<el-option :label="$t('account.account.woman')" :value="3" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('account.account.fenrun') + ':'" prop="bill_account" class="pr-8">
				<el-input v-model="data.info.bill_account" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('account.account.BelongOrgan') + ':'" prop="ao_id" class="pr-8">
				<el-cascader v-model="data.info.ao_id" :props="organinfo" class="w-full" clearable
					:placeholder="$t('message.pleaseSelect')" />
			</el-form-item>

			<el-form-item :label="$t('account.account.status') + ':'" prop="status" class="pr-8">
				<el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.enable')" :value="1" />
					<el-option :label="$t('public.disable')" :value="2" />
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('account.account.notification') + ':'" prop="wx_notice" class="pr-8">
				<el-select v-model="data.info.wx_notice" clearable filterable :placeholder="$t('message.pleaseSelect')">
					<el-option v-for="(item, key) in getPlevel.noticeList" :key="key" :label="$t(item.label)"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('account.account.email') + ':'" prop="email_notice" class="pr-8">
				<el-select v-model="data.info.email_notice" clearable filterable
					:placeholder="$t('message.pleaseSelect')">
					<el-option v-for="(item, key) in getPlevel.noticeList" :key="key" :label="$t(item.label)"
						:value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<div class="w-9/12 text-center">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancel">{{ $t('public.cancel') }}</el-button>
				</div>
			</el-form-item>

		</el-form>

		<!-- 图片展示 -->
		<el-dialog v-model="data.demonstrate" center width="30%">
			<div class="flex justify-center">
				<el-image class="max-w-80" :src="data.info.pic" fit="fill" />
			</div>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import arrange from '@/utils/hierarchy';
import getPlevel from '@/utils/level';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let emit = defineEmits(['investigate'])
let ruleFormRef = ref<any>();

let data = reactive({
	demonstrate: false, // 头像
	info: { // 主体信息
		nickname: '',
		account: '',
		password: '',
		sex: 1,
		pic: '',
		bill_account: '',
		real_name: '',
		status: 1,
		ao_id: '',
		wx_notice: '',
		email_notice: ''
	},
	rules: { // 表单验证
		nickname: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		account: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' },
		password: { required: true, message:  $t('message.pleaseEnter'), trigger: 'blur' }
	},
})

// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		data.info.pic = e.file.response.data
	} else {
		data.info.pic = ''
	}
}

// 查看图片
let urlimg = (e) => {
	if (e == '') {
		return;
	}
	data.demonstrate = true;
}

// 管理组织
let organinfo = reactive({
	lazy: true,
	multiple: false,
	emitPath: true,
	checkStrictly: true,
	async lazyLoad(node, resolve) {
		let nodes = await arrange.arrange(2, node.data.value);
		resolve(nodes);
	}
});

// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {

			let obj = {}
			for (let key in data.info) {
				if (key != 'ao_id') {
					obj[key] = data.info[key] || ''
				}
			}
			obj.ao_id = ''
			if (data.info.ao_id.length != 0) {
				obj.ao_id = data.info.ao_id[data.info.ao_id.length - 1]
			}

			emit('investigate', obj)
		}
	})
}

// 取消
let cancel = () => {
	emit('investigate', false)
}



</script>